import  { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router'
import Layout from './layouts/index.js'
import Dashboard from './pages/Dashboard.js'
import WebGPUIndex from './pages/WebGPUIndex.js'
import IntegrationPage from './pages/IntegrationPage.js'
import TwoCubesPage from './samples/twocubes/index.js'
import TriangleSample from './samples/triangles/index.js'
import OneCubeSample from './samples/onecubes/index.js'
import TriangleMSAA from './samples/triangleMSAA/index.js'
import TexturedCubeSample from './samples/texturedCube/index.js'
import ABufferSample from './samples/a-buffer/index.js'
import InstanceCubeSample from './samples/instanceCube/index.js'
import FractalCubeSample from './samples/fractalCube/index.js'
import CubeMapSample from './samples/cubeMap/index.js'
import BlendingSample from './samples/blending/index.js'
import CameraSample from './samples/cameras/index.js'
import MultipleCanvasSample from './samples/multipleCanvas/index.js'
import GenerateMipmapSample from './samples/generateMipmap/index.js'
import ImageBlur from './samples/imgBlur/index.js'
import RenderBundlesSample from './samples/renderBundles/index.js'
import GameOfLifeSample from './samples/gameofLife/index.js'
import NormalMapSample from './samples/normalMap/index.js'
import PointsSample from './samples/points/index.js'
import ParticlesSample from './samples/particles/index.js'
import ComputeBoidSample from './samples/computeBoids/index.js'

import './index.css'
import App from './App.js'

const router = createBrowserRouter([
  {
    Component: App,
    children: [
      {
        path: '/',
        Component: Layout,
        children: [
          {
            path: '/dashboard',
            Component: Dashboard,
          },
          {
            path: '/allSamples',
            Component: WebGPUIndex,
            children: [
              {
                path: 'abuffermultipass',
                Component: ABufferSample,
              },
              {
                path: 'abufferclampPixelRatio',
                Component: ABufferSample,
              },
              {
                path: 'onecubes',
                Component: OneCubeSample,
              },
              {
                path: 'twocubes',
                Component: TwoCubesPage,
              },
              {
                path: 'texturedCube',
                Component: TexturedCubeSample,
              },
              {
                path: 'instanceCube',
                Component: InstanceCubeSample,
              },
              {
                path: 'fractalCube',
                Component: FractalCubeSample,
              },
              {
                path: 'cubeMap',
                Component: CubeMapSample,
              },
              {
                path: 'triangle',
                Component: TriangleSample,
              },
              {
                path: 'triangleMSAA',
                Component: TriangleMSAA,
              },
              {
                path: 'cameras',
                Component: CameraSample,
              },
              {
                path: 'blending',
                Component: BlendingSample,
              },
              {
                path: 'multipleCanvas',
                Component: MultipleCanvasSample,
              },
              {
                path: 'generateMipmap',
                Component: GenerateMipmapSample,
              },
              {
                path: 'imgBlur',
                Component: ImageBlur,
              },
              {
                path: 'renderBundles',
                Component: RenderBundlesSample,
              },
              {
                path: 'gameofLife',
                Component: GameOfLifeSample,
              },
              {
                path: 'normalMap',
                Component: NormalMapSample,
              },
              {
                path: 'points',
                Component: PointsSample,
              },
              {
                path: 'particles',
                Component: ParticlesSample,
              },
              {
                path: 'computeboids',
                Component: ComputeBoidSample
              }
            ]
          },
          {
            path: '/integrations',
            Component: IntegrationPage,
          }
        ]
      },
    ]
  },
]);
const rootElement = document.getElementById('root');
if (rootElement) {
  createRoot(rootElement).render(
    <StrictMode>
      <RouterProvider router={router} />
    </StrictMode>,
  );
}
